<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户信息详情</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .img1{
        
       width: 1600px;
        height: 600px;
    }
    .div1{
        width: 500px;
    }
    .div2{
        width: 277px;
        height:70px;
        background-color: #3d4253;
       text-align: center;
       line-height: 70px;
       position: absolute;
       left: 30px;
     
      
       
    }
    
    .div3{
        width: 322px;
        height:70px;
        background-color:#3d4253;
       text-align: center;
       line-height: 70px;
      position: absolute;
      left: 306.5px;
      
      
    
    }
    .a1{
        color: black;
        text-decoration-line: underline;
        
    }
    .div4{
       
         height: 50px;
         left: 50px;
    }
    
    body{
        background-color: #eee
        
    }
   
    .h1{
        padding-left: 170px;
        
    }
    .div5{
        width: 275px;
        height: 200px;
        background-color: #FFF;
      line-height: 25px;
      position: absolute;
      left: 30px;
      bottom: -231.5px;
      border: solid 1px #dbdbdb;
    }
    .div7{
        background-color: black;
        width: 100px;
        height: 100px;
    }
    .div6{
        width: 321px;
        height: 200.5px;
        background-color: #FFF;
      line-height: 25px;
      position: absolute;
      border: solid 1px #dbdbdb;
      left: 306.5px;
      bottom: -232px;
    }
   
    .div7{
        position: absolute;
        background-color:#fff;
        bottom: -800px;
        width: 700px;
        height: 450px;
        left: 30px;
        border: solid 1px #dbdbdb;
    border-radius: 8px;
    }
    .h5{
        color: #676a70;
    font-size: 22px;
    line-height: 24px;
    height: 24px;
    font-style: normal;
    }
    .div8{
        position: absolute;
        background-color:#fff;
        bottom: -800px;
        width: 700px;
        height: 450px;
        left:  800px;
        border: solid 1px #dbdbdb;
    border-radius: 8px;
    }
    tr{
        border-color: inherit;
    }
   .td1{
        background: #3d4253;
        width: 200px;
        height: 200px;
        border: solid 1px #e1e1e1;
        
    }
    .td2{
      width: 200px;
        height: 200px;
        border: solid 1px #e1e1e1;
    }
    tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.p1{
  color: #b4bad0;
    font-size: 20px;
    padding-bottom:20px;
    padding-left: 10px;
}
.img2{
width: 75px;
height: 75px;
padding-left: 50px;
padding-bottom: 20px;
}
.img3{
  width: 85px;
height: 75px;
padding-left: 50px;
padding-bottom: 20px;
}
.p2{
  color: #b4bad0;
    font-size: 20px;
    padding-bottom:20px;
    padding-left: 10px;
}
.td3{
  width: 200px;
        height: 200px;
        border: solid 1px #e1e1e1;
}
.img4{
  width: 90px;
height: 85px;
padding-left: 50px;
padding-bottom: 15px;
}
.p3{
  color: #b4bad0;
    font-size: 20px;
    padding-bottom:25px;
    padding-left: 10px;
}
.div9{
  position: absolute;
  background-color: white;
  width: 200px;
  height: 250px;
  right: 50px;
}
.img5{
  width: 200px;
  height: 200px;
}
.div10{
  background-color: #fff;
  position: absolute;
  width: 400px;
  height: 100px;
  bottom: -1000px;
  left: 25px;
}
.img6{
  width: 100px;
  height: 100px;
}


.v-menu {
    background-color: #222227;
    position: relative;
    box-sizing: border-box;
    border-bottom: 2px solid #33333b;
}

.topbground {
    color: #0b0b0e;
    width: 1600px;
}

.v-top {
    height: 60px;
}

.v-log {
    overflow: hidden;
    float: left;
}

.v-log .v-menu-logo1 {
    height: 48px;
    margin: 6px 0 0 25px;
}

.v-log img {
    float: left;
}

img {
    border-style: none;
}

.v-log .v-menu-logo2 {
    height: 17px;
    margin: 21px 0 0 10px;
}

.v-menu-lists {
    position: absolute;
    width: 100%;
    text-align: center;
}

.v-menu-lists li {
    display: inline-block;
    color: #a38d64;
    margin: 0 20px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 58px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.v-menu-lists li a {
    text-decoration: none;
    color: #a38d64;
}

.v-user {
    float: right;
    margin-right: 50px;
    overflow: hidden;
}

.v-user>div.v-userimg {
    margin-top: 20px;
}

.v-user>div.v-userimg {
    margin-left: 10px;
}

.v-user>div {
    float: left;
    margin: 20px 20px 0 0;
    position: relative;
}
.img7{
  width: 100px;
  height: 100px;
}

</style>
<body>
    <div class="v-top v-menu topbground">
        <div class="v-log">
            <img src="img/1.png" class="v-menu-logo1">
            <img src="img/2.png" class="v-menu-logo2">
        </div>
        <div class="v-menu-lists">
            <ul>
                <li><a href="index_wz.html">首页</a> </li>
            </ul>
        </div>
        
        </div>
    </div>

    <div class="div1">
        <div> 
            <img src="img/澜.jpg" alt="" class="img1">
            
        </div>
        
                
                    <div class="div2">
                        <p id="p1" style="color: #b4bad0;">个人信息</p>
                     </div>
                     <div class="div3">
                       <p id="p2" style="color:#b4bad0;">游戏详情</p>
                     </div>
        <div class="div9"><img src="img/tubiao4.png" alt="" class="img5">提高胜率，扫码再来一局<p></p></div>
    
        <div class="div5">
            <img src="img/tubiao6.jpg" alt="" class="img6">
            <h5 class="h6">用户名：--</h5>
            <h5 class="h7">游戏昵称：--</h5>
            <h5 class="h8">性别：--</h5>
        </div>
        <div class="div6" id="div3">
          <img src="img/tubiao8.png" alt="" class="img7">
           <h5 class="h2">信誉积分：--</h5>
           <h5 class="h3">当前段位：--</h5>
           <h5 class="h4">排位胜率：--</h5>
        </div>
        
       <div class="div7">
         
        <h3>综合数据</h3>
         <table>
                <tbody>
                        <tr>
                                <td class="td1"><img src="img/tubiao1.png" alt="" class="img2"><p class="p1" >全部比赛:--</p></td>
                                <td class="td2"><img src="img/tubiao2.png" alt="" class="img3"><p class="p2" >胜场:--</p></td>
                                <td class="td3"><img src="img/tubiao3.png" alt="" class="img4"><p class="p3" >胜率:--</p></td>
                            </tr>
                            <tr>
                                <td class="td1"><img src="img/tubiao1.png" alt="" class="img2"><p class="p1" id="p4">排位赛:--</p></td>
                                <td class="td2"><img src="img/tubiao2.png" alt="" class="img3"><p class="p2" id="p5">胜场:--</p></td>
                                <td class="td3"><img src="img/tubiao3.png" alt="" class="img4"><p class="p3" id="p6">胜率:--</p></td>
                            </tr>
                 </tbody>
         </table>
         
        
       </div>
       <div class="div8" id="div9"></div>
       <div class="div10"><img src="img/tubiao5.png" alt=""></div>
    </div>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <script type="text/javascript">
        
        var storage=window.localStorage;
       const arr=[
         {
           用户名:'123456',
           匹配:'500',
           排位:'500',
           匹配胜场:'250',
           排位胜场:'250',
           信誉积分:'100',
           段位:'永恒钻石',
           游戏昵称:'WHT',
           性别:'男',
           输出:'7',
           生存:'7',
           团战:'7',
           发育:'6',
           KDA:'7',
         },
         {
          用户名:'1234567',
           匹配:'1000',
           排位:'1000',
           匹配胜场:'600',
           排位胜场:'600',
           信誉积分:'10000',
           段位:'最强王者',
           输出:'10',
           生存:'8',
           团战:'9',
           发育:'9',
           KDA:'10',
           昵称:'LING.久煜',
           性别:'男',
           
         },
         {
         用户名:'6666',
           匹配:'1000',
           排位:'1000',
           匹配胜场:'500',
           排位胜场:'600',
           信誉积分:'100',
           段位:'至尊星耀',
           输出:'9',
           生存:'8',
           团战:'8',
           发育:'8',
           KDA:'9',
           昵称:'〃殇ぐ.',
           性别:'男'
           },
           {
         用户名:'99999',
           匹配:'250',
           排位:'250',
           匹配胜场:'100',
           排位胜场:'200',
           信誉积分:'100',
           段位:'荣耀黄金',
           输出:'6',
           生存:'6',
           团战:'6',
           发育:'6',
           KDA:'6',
           昵称:'古见同学有交流障碍症',
           性别:'男',
           }
           ,
           {
          用户名:'1234567',
           匹配:'20000',
           排位:'100000',
           匹配胜场:'19999',
           排位胜场:'99999',
           信誉积分:'1',
           段位:'荣耀王者',
           输出:'10',
           生存:'10',
           团战:'10',
           发育:'10',
           KDA:'10',
           昵称:'困',
           性别:'不明',
         },
       ];
       var denglu1=window.localStorage.getItem('arr7');
       var denglu2=JSON.parse(denglu1);
       var denglu3=denglu2[0].id;
       storage.setItem('arr',JSON.stringify(arr));
       if(denglu3=='吴海涛'){
    var jsonoj1=parseInt(JSON.parse(arr[0].匹配));
    var jsonoj2=parseInt(JSON.parse(arr[0].排位));
    var sum1=jsonoj1+jsonoj2;
    var jsonoj3=parseInt(JSON.parse(arr[0].匹配胜场));
    var jsonoj4=parseInt(JSON.parse(arr[0].排位胜场));
    var a=document.querySelector('.p1');
    var sum2=jsonoj3+jsonoj4;
    var shenglv1=sum2/sum1*100;
    shenglv1=shenglv1.toFixed(2);
    var shenglv2=jsonoj4/jsonoj2*100;
   shenglv2=shenglv2.toFixed(2);
    a.innerHTML='全部比赛:'+sum1;
   var b=document.getElementById('p4');
   b.innerHTML='排位赛:'+jsonoj2;
   var c=document.querySelector('.p2');
   c.innerHTML='胜场:'+sum2;
   var c=document.querySelector('.p3');
   c.innerHTML='胜率:'+shenglv1+"%";
   var b=document.getElementById('p5');
   b.innerHTML='胜场:'+jsonoj4;
   var b=document.getElementById('p6');
   b.innerHTML='胜率:'+shenglv2+"%";
   var d=document.querySelector('.h2');
   d.innerHTML='信誉积分:'+arr[0].信誉积分;
   var e=document.querySelector('.h3');
   e.innerHTML='段位:'+arr[0].段位;
   var f=document.querySelector('.h4');
   f.innerHTML='胜率:'+shenglv2+"%";
   var g=document.querySelector('.h6');
   g.innerHTML='用户名:'+arr[0].用户名;
  var h=document.querySelector('.img6');
  h.src="img/tubiao16.jpg";
  var i=document.querySelector('.img7');
       if(arr[0].段位=='倔强青铜'){
         i.src='img/tubiao8.png';
       }
       if(arr[0].段位=='秩序白银'){
         i.src='img/tubiao9.png';
       }
       if(arr[0].段位=='荣耀黄金'){
         i.src='img/tubiao10.png';
       }
       if(arr[0].段位=='尊贵铂金'){
         i.src='img/tubiao11.png';
       }
       if(arr[0].段位=='永恒钻石'){
         i.src='img/tubiao12.png';
       }
       if(arr[0].段位=='至尊星耀'){
         i.src='img/tubiao13.png';
       }
       if(arr[0].段位=='最强王者'){
         i.src='img/tubiao14.png';
       }
       if(arr[0].段位=='荣耀王者'){
         i.src='img/tubiao18.png';
       }
       var j=document.querySelector('.h7');
       var k=document.querySelector('.h8');
      j.innerHTML='游戏昵称:'+arr[0].昵称;
      k.innerHTML='性别:'+arr[0].性别;
      var dom = document.getElementById('div9');
        var myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        var app = {};
        
        var option;
    
        option = {
            splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      title: {
        text: '雷达图'
      },
      legend: {
        data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '输出', max: 10 },
          { name: '生存', max: 10 },
          { name: '团战', max: 10 },
          { name: '发育', max: 10 },
          { name: 'KDA', max: 10 },
         
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [{
              value:[arr[0].输出,arr[0].生存,arr[0].团战,arr[0].发育,arr[0].KDA],
              areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 0
              },
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 1
              }
            ])
          }
          
          }
          ]
        }
      ]
    };
    
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
       }
       
       else if(denglu3=='潘灵哲'){
        var jsonoj1=parseInt(JSON.parse(arr[1].匹配));
    var jsonoj2=parseInt(JSON.parse(arr[1].排位));
    var sum1=jsonoj1+jsonoj2;
    var jsonoj3=parseInt(JSON.parse(arr[1].匹配胜场));
    var jsonoj4=parseInt(JSON.parse(arr[1].排位胜场));
    var a=document.querySelector('.p1');
    var sum2=jsonoj3+jsonoj4;
    var shenglv1=sum2/sum1*100;
    shenglv1=shenglv1.toFixed(2);
    var shenglv2=jsonoj4/jsonoj2*100;
   shenglv2=shenglv2.toFixed(2);
    a.innerHTML='全部比赛:'+sum1;
   var b=document.getElementById('p4');
   b.innerHTML='排位赛:'+jsonoj2;
   var c=document.querySelector('.p2');
   c.innerHTML='胜场:'+sum2;
   var c=document.querySelector('.p3');
   c.innerHTML='胜率:'+shenglv1+"%";
   var b=document.getElementById('p5');
   b.innerHTML='胜场:'+jsonoj4;
   var b=document.getElementById('p6');
   b.innerHTML='胜率:'+shenglv2+"%";
   var d=document.querySelector('.h2');
   d.innerHTML='信誉积分:'+arr[1].信誉积分;
   var e=document.querySelector('.h3');
   e.innerHTML='段位:'+arr[1].段位;
   var f=document.querySelector('.h4');
   f.innerHTML='胜率:'+shenglv2+"%";
   var g=document.querySelector('.h6');
   g.innerHTML=arr[1].用户名;
   var h=document.querySelector('.img6');
  h.src="img/tubiao15.jpg";
   var i=document.querySelector('.img7');
       if(arr[1].段位=='倔强青铜'){
         i.src='img/tubiao8.png';
       }
       if(arr[1].段位=='秩序白银'){
         i.src='img/tubiao9.png';
       }
       if(arr[1].段位=='荣耀黄金'){
         i.src='img/tubiao10.png';
       }
       if(arr[1].段位=='尊贵铂金'){
         i.src='img/tubiao11.png';
       }
       if(arr[1].段位=='永恒钻石'){
         i.src='img/tubiao12.png';
       }
       if(arr[1].段位=='至尊星耀'){
         i.src='img/tubiao13.png';
       }
       if(arr[1].段位=='最强王者'){
         i.src='img/tubiao14.png';
       }
       if(arr[1].段位=='荣耀王者'){
         i.src='img/tubiao18.png';
       }
       var j=document.querySelector('.h7');
       var k=document.querySelector('.h8');
      j.innerHTML='游戏昵称:'+arr[1].昵称;
      k.innerHTML='性别:'+arr[1].性别;
      var dom = document.getElementById('div9');
        var myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        var app = {};
        
        var option;
    
        option = {
            splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      title: {
        text: '雷达图'
      },
      legend: {
        data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '输出', max: 10 },
          { name: '生存', max: 10 },
          { name: '团战', max: 10 },
          { name: '发育', max: 10 },
          { name: 'KDA', max: 10 },
         
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [{
              value:[arr[1].输出,arr[1].生存,arr[1].团战,arr[1].发育,arr[1].KDA],
              areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 0
              },
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 1
              }
            ])
          }
          
          }
          ]
        }
      ]
    };
    
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
       }
       else if(denglu3=='杨邦杰'){
        var jsonoj1=parseInt(JSON.parse(arr[2].匹配));
    var jsonoj2=parseInt(JSON.parse(arr[2].排位));
    var sum1=jsonoj1+jsonoj2;
    var jsonoj3=parseInt(JSON.parse(arr[2].匹配胜场));
    var jsonoj4=parseInt(JSON.parse(arr[2].排位胜场));
    var a=document.querySelector('.p1');
    var sum2=jsonoj3+jsonoj4;
    var shenglv1=sum2/sum1*100;
    shenglv1=shenglv1.toFixed(2);
    var shenglv2=jsonoj4/jsonoj2*100;
   shenglv2=shenglv2.toFixed(2);
    a.innerHTML='全部比赛:'+sum1;
   var b=document.getElementById('p4');
   b.innerHTML='排位赛:'+jsonoj2;
   var c=document.querySelector('.p2');
   c.innerHTML='胜场:'+sum2;
   var c=document.querySelector('.p3');
   c.innerHTML='胜率:'+shenglv1+"%";
   var b=document.getElementById('p5');
   b.innerHTML='胜场:'+jsonoj4;
   var b=document.getElementById('p6');
   b.innerHTML='胜率:'+shenglv2+"%";
   var d=document.querySelector('.h2');
   d.innerHTML='信誉积分:'+arr[2].信誉积分;
   var e=document.querySelector('.h3');
   e.innerHTML='段位:'+arr[2].段位;
   var f=document.querySelector('.h4');
   f.innerHTML='胜率:'+shenglv2+"%";
   var g=document.querySelector('.h6');
   g.innerHTML=arr[2].用户名;
   var h=document.querySelector('.img6');
  h.src="img/tubiao7.jpg";
   var i=document.querySelector('.img7');
       if(arr[2].段位=='倔强青铜'){
         i.src='img/tubiao8.png';
       }
       if(arr[2].段位=='秩序白银'){
         i.src='img/tubiao9.png';
       }
       if(arr[2].段位=='荣耀黄金'){
         i.src='img/tubiao10.png';
       }
       if(arr[2].段位=='尊贵铂金'){
         i.src='img/tubiao11.png';
       }
       if(arr[2].段位=='永恒钻石'){
         i.src='img/tubiao12.png';
       }
       if(arr[2].段位=='至尊星耀'){
         i.src='img/tubiao13.png';
       }
       if(arr[2].段位=='最强王者'){
         i.src='img/tubiao14.png';
       }
       if(arr[2].段位=='荣耀王者'){
         i.src='img/tubiao18.png';
       }
       var j=document.querySelector('.h7');
       var k=document.querySelector('.h8');
      j.innerHTML='游戏昵称:'+arr[2].昵称;
      k.innerHTML='性别:'+arr[2].性别;
      var dom = document.getElementById('div9');
        var myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        var app = {};
        
        var option;
    
        option = {
            splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      title: {
        text: '雷达图'
      },
      legend: {
        data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '输出', max: 10 },
          { name: '生存', max: 10 },
          { name: '团战', max: 10 },
          { name: '发育', max: 10 },
          { name: 'KDA', max: 10 },
         
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [{
              value:[arr[2].输出,arr[2].生存,arr[2].团战,arr[2].发育,arr[2].KDA],
              areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 0
              },
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 1
              }
            ])
          }
          
          }
          ]
        }
      ]
    };
    
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
       }
       else if(denglu3=='李乐宁'){
        var jsonoj1=parseInt(JSON.parse(arr[3].匹配));
    var jsonoj2=parseInt(JSON.parse(arr[3].排位));
    var sum1=jsonoj1+jsonoj2;
    var jsonoj3=parseInt(JSON.parse(arr[3].匹配胜场));
    var jsonoj4=parseInt(JSON.parse(arr[3].排位胜场));
    var a=document.querySelector('.p1');
    var sum2=jsonoj3+jsonoj4;
    var shenglv1=sum2/sum1*100;
    shenglv1=shenglv1.toFixed(2);
    var shenglv2=jsonoj4/jsonoj2*100;
   shenglv2=shenglv2.toFixed(2);
    a.innerHTML='全部比赛:'+sum1;
   var b=document.getElementById('p4');
   b.innerHTML='排位赛:'+jsonoj2;
   var c=document.querySelector('.p2');
   c.innerHTML='胜场:'+sum2;
   var c=document.querySelector('.p3');
   c.innerHTML='胜率:'+shenglv1+"%";
   var b=document.getElementById('p5');
   b.innerHTML='胜场:'+jsonoj4;
   var b=document.getElementById('p6');
   b.innerHTML='胜率:'+shenglv2+"%";
   var d=document.querySelector('.h2');
   d.innerHTML='信誉积分:'+arr[3].信誉积分;
   var e=document.querySelector('.h3');
   e.innerHTML='段位:'+arr[3].段位;
   var f=document.querySelector('.h4');
   f.innerHTML='胜率:'+shenglv2+"%";
   var g=document.querySelector('.h6');
   g.innerHTML=arr[3].用户名;
   var h=document.querySelector('.img6');
  h.src="img/tubiao17.jpg";
   var i=document.querySelector('.img7');
       if(arr[3].段位=='倔强青铜'){
         i.src='img/tubiao8.png';
       }
       if(arr[3].段位=='秩序白银'){
         i.src='img/tubiao9.png';
       }
       if(arr[3].段位=='荣耀黄金'){
         i.src='img/tubiao10.png';
       }
       if(arr[3].段位=='尊贵铂金'){
         i.src='img/tubiao11.png';
       }
       if(arr[3].段位=='永恒钻石'){
         i.src='img/tubiao12.png';
       }
       if(arr[3].段位=='至尊星耀'){
         i.src='img/tubiao13.png';
       }
       if(arr[3].段位=='最强王者'){
         i.src='img/tubiao14.png';
       }
       if(arr[3].段位=='荣耀王者'){
         i.src='img/tubiao18.png';
       }
       var j=document.querySelector('.h7');
       var k=document.querySelector('.h8');
      j.innerHTML='游戏昵称:'+arr[3].昵称;
      k.innerHTML='性别:'+arr[3].性别;
      var dom = document.getElementById('div9');
        var myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        var app = {};
        
        var option;
    
        option = {
            splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      title: {
        text: '雷达图'
      },
      legend: {
        data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '输出', max: 10 },
          { name: '生存', max: 10 },
          { name: '团战', max: 10 },
          { name: '发育', max: 10 },
          { name: 'KDA', max: 10 },
         
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [{
              value:[arr[3].输出,arr[3].生存,arr[3].团战,arr[3].发育,arr[3].KDA],
              areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 0
              },
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 1
              }
            ])
          }
          
          }
          ]
        }
      ]
    };
    
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
       }
       else if(denglu3=='赵哲涛'){
        var jsonoj1=parseInt(JSON.parse(arr[4].匹配));
    var jsonoj2=parseInt(JSON.parse(arr[4].排位));
    var sum1=jsonoj1+jsonoj2;
    var jsonoj3=parseInt(JSON.parse(arr[4].匹配胜场));
    var jsonoj4=parseInt(JSON.parse(arr[4].排位胜场));
    var a=document.querySelector('.p1');
    var sum2=jsonoj3+jsonoj4;
    var shenglv1=sum2/sum1*100;
    shenglv1=shenglv1.toFixed(2);
    var shenglv2=jsonoj4/jsonoj2*100;
   shenglv2=shenglv2.toFixed(2);
    a.innerHTML='全部比赛:'+sum1;
   var b=document.getElementById('p4');
   b.innerHTML='排位赛:'+jsonoj2;
   var c=document.querySelector('.p2');
   c.innerHTML='胜场:'+sum2;
   var c=document.querySelector('.p3');
   c.innerHTML='胜率:'+shenglv1+"%";
   var b=document.getElementById('p5');
   b.innerHTML='胜场:'+jsonoj4;
   var b=document.getElementById('p6');
   b.innerHTML='胜率:'+shenglv2+"%";
   var d=document.querySelector('.h2');
   d.innerHTML='信誉积分:'+arr[4].信誉积分;
   var e=document.querySelector('.h3');
   e.innerHTML='段位:'+arr[4].段位;
   var f=document.querySelector('.h4');
   f.innerHTML='胜率:'+shenglv2+"%";
   var g=document.querySelector('.h6');
   g.innerHTML=arr[4].用户名;
   var h=document.querySelector('.img6');
  h.src="img/tubiao19.jpg";
   var i=document.querySelector('.img7');
       if(arr[4].段位=='倔强青铜'){
         i.src='img/tubiao8.png';
       }
       if(arr[4].段位=='秩序白银'){
         i.src='img/tubiao9.png';
       }
       if(arr[4].段位=='荣耀黄金'){
         i.src='img/tubiao10.png';
       }
       if(arr[4].段位=='尊贵铂金'){
         i.src='img/tubiao11.png';
       }
       if(arr[4].段位=='永恒钻石'){
         i.src='img/tubiao12.png';
       }
       if(arr[4].段位=='至尊星耀'){
         i.src='img/tubiao13.png';
       }
       if(arr[4].段位=='最强王者'){
         i.src='img/tubiao14.png';
       }
       if(arr[4].段位=='荣耀王者'){
         i.src='img/tubiao18.png';
       }
       var j=document.querySelector('.h7');
       var k=document.querySelector('.h8');
      j.innerHTML='游戏昵称:'+arr[4].昵称;
      k.innerHTML='性别:'+arr[4].性别;
      var dom = document.getElementById('div9');
        var myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        var app = {};
        
        var option;
    
        option = {
            splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      title: {
        text: '雷达图'
      },
      legend: {
        data: ['Allocated Budget', 'Actual Spending']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '输出', max: 10 },
          { name: '生存', max: 10 },
          { name: '团战', max: 10 },
          { name: '发育', max: 10 },
          { name: 'KDA', max: 10 },
         
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [{
              value:[arr[4].输出,arr[4].生存,arr[4].团战,arr[4].发育,arr[4].KDA],
              areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 0
              },
              {
                color: 'rgba(79,181,247,0.6)',
                offset: 1
              }
            ])
          }
          
          }
          ]
        }
      ]
    };
    
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
       }
      </script>
</body>

</html>